<!-- 车型管理 -->
<template>
  <div class="dashboard-container car-models customer-list-box">
    <div class="app-container">
      <el-card
        class="search-card-box"
        shadow="never"
      >
        <el-form
          ref="searchFormDataRef"
          label-width="80px"
          :model="waybillSearchFormData"
        >
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item
                label="车型编号:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-input
                  v-model="waybillSearchFormData.id"
                  placeholder="请输入车型编号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="应载重量:"
                style="margin-bottom: 20px"
                label-width="110px"
              >
                <el-select
                  v-model="waybillSearchFormData.allowableLoad"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in allowableLoad"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="应载体积:"
                style="margin-bottom: 20px"
                label-width="110px"
              >
                <el-select
                  v-model="waybillSearchFormData.allowableVolume"
                  clearable
                  placeholder="请选择应载体积"
                >
                  <el-option
                    v-for="item in allowableVolume"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="车辆类型:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-input
                  v-model="waybillSearchFormData.name"
                  placeholder="请输入车辆类型"
                />
              </el-form-item>
            </el-col>
            <el-col
              :span="8"
              style="padding-left:50px"
            >
              <el-button
                type="warning"
                @click="serachBtn"
              >搜索</el-button>
              <el-button
                plain
                class="reset-btn"
                @click="resetBtn"
              >重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <div
        v-loading="listLoading"
        :class="{ 'loading-box': listLoading }"
        element-loading-text="加载中"
        style="margin-top: 20px"
      >
        <el-card
          shadow="never"
          class="table-card-box"
        >
          <el-button
            type="warning"
            style="margin-bottom:20px"
            @click="handleDispatch('add')"
          >
            新增车型
          </el-button>
          <el-table
            :data="dataList"
            fit
            style="width: 100%"
            stripe
            :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
          >
            <el-table-column
              align="left"
              type="index"
              label="序号"
              width="60"
            >
            </el-table-column>
            <el-table-column
              align="left"
              label="车型编号"
              min-width="160"
              prop="id"
            >
            </el-table-column>
            <el-table-column
              align="left"
              label="车辆类型"
              min-width="160"
              prop="name"
            >
            </el-table-column>
            <el-table-column
              align="left"
              label="车型数量"
              min-width="130"
              prop="num"
            >
            </el-table-column>
            <el-table-column
              align="left"
              label="应载重量（吨）"
              min-width="120"
              prop="allowableLoad"
            >
            </el-table-column>
            <el-table-column
              align="left"
              label="应载体积（立方米）"
              min-width="170"
              prop="allowableVolume"
            >
            </el-table-column>
            <el-table-column
              align="left"
              label="长（米）"
              min-width="120"
              prop="measureLong"
            >
            </el-table-column>
            <el-table-column
              align="left"
              label="宽（米）"
              min-width="120"
              prop="measureWidth"
            >
            </el-table-column>
            <el-table-column
              align="left"
              label="宽（米）"
              min-width="120"
              prop="measureHigh"
            >
            </el-table-column>
            <el-table-column
              align="center"
              fixed="right"
              label="操作"
              width="100"
              class-name="small-padding fixed-width"
            >
              <template #default="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="handleDispatch('edit',row.id)"
                >编辑</el-link>
                <el-divider direction="vertical"></el-divider>
                <el-link
                  type="danger"
                  :underline="false"
                  @click="delData(row.id)"
                >删除</el-link>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div
            v-show="dataList && dataList.length > 0"
            class="pagination"
          >
            <div class="pages">
              <el-pagination
                :current-page="Number(formData.page)"
                :total="Number(counts)"
                :page-size="Number(formData.pageSize)"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog
      title="新增车型"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
      class="add-form-dialog"
    >
      <el-form
        ref="formDataRef"
        label-position="right"
        label-width="140px"
        style="width: 100%"
        :model="formData"
        :rules="waybillSearchFormDataRules"
      >
        <el-form-item
          label="车辆类型"
          prop="name"
        >
          <el-input
            v-model="formData.name"
            placeholder="请输入车辆类型"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            ></span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="应载重量"
          prop="allowableLoad"
        >
          <el-input
            v-model="formData.allowableLoad"
            placeholder="请输入车型载重"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >吨</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="应载体积"
          prop="allowableVolume"
        >
          <el-input
            v-model="formData.allowableVolume"
            placeholder="请输入车型体积"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >立方</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="长"
          prop="measureLong"
        >
          <el-input
            v-model="formData.measureLong"
            placeholder="请输入长"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >米</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="宽"
          prop="measureWidth"
        >
          <el-input
            v-model="formData.measureWidth"
            placeholder="请输入宽"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >米</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="高"
          prop="measureHigh"
        >
          <el-input
            v-model="formData.measureHigh"
            placeholder="请输入高"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >米</span>
          </el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          class="save-btn"
          @click="submit"
        >确认</el-button>
        <el-button
          class="cancel-btn"
          @click="handleClose"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { add, del, detail, list, update } from '@/api/transit'
export default {
  components: {},
  data() {
    return {
      listLoading: false,
      dialogVisible: false,
      dataList: [],
      type: '',
      formData: {
        allowableLoad: '',
        allowableVolume: '',
        measureLong: '0.0',
        measureWidth: '0.0',
        measureHigh: '0.0',
        id: '',
        name: ''
      },
      waybillSearchFormDataRules: {
        allowableLoad: [{ required: true, message: '应载重量不能为空', trigger: 'blur' },
          { min: 1, max: 8, message: '应载重量的长度为1-8个字符', trigger: 'blur' }],
        allowableVolume: [{ required: true, message: '应载体积不能为空', trigger: 'blur' },
          { min: 1, max: 8, message: '应载体积的长度为1-8个字符', trigger: 'blur' }],
        name: [{ required: true, message: '车型名称不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '车型名称的长度为2-10个字符', trigger: 'blur' }]
      },

      waybillSearchFormData: {
        page: 1,
        pageSize: 10,
        id: '',
        name: '',
        allowableVolume: '',
        allowableLoad: ''
      },
      allowableVolume: [
        { id: 'RANGE_LEVEL_1', value: '<3 (m³)' },
        { id: 'RANGE_LEVEL_2', value: '3-5 (m³)' },
        { id: 'RANGE_LEVEL_3', value: '5-10 (m³)' },
        { id: 'RANGE_LEVEL_4', value: '10-15 (m³)' },
        { id: 'RANGE_LEVEL_5', value: '15-30 (m³)' },
        { id: 'RANGE_LEVEL_6', value: '30-50 (m³)' },
        { id: 'RANGE_LEVEL_7', value: '50-80(m³)' },
        { id: 'RANGE_LEVEL_8', value: '80-150 (m³)' },
        { id: 'RANGE_LEVEL_9', value: '>150 (m³)' }
      ],
      allowableLoad: [
        { id: 'RANGE_LEVEL_1', value: '<1.8 (吨)' },
        { id: 'RANGE_LEVEL_2', value: '1.8-6 (吨)' },
        { id: 'RANGE_LEVEL_3', value: '6-14 (吨)' },
        { id: 'RANGE_LEVEL_4', value: '14-30 (吨)' },
        { id: 'RANGE_LEVEL_5', value: '30-50 (吨)' },
        { id: 'RANGE_LEVEL_6', value: '50-100 (吨)' },
        { id: 'RANGE_LEVEL_7', value: '100> (吨)' }
      ],
      counts: 0

    }
  },
  mounted() {
    this.loadingList()
  },
  methods: {
    async loadingList() {
      console.log(this.formData)
      const { data } = await list({
        page: 1,
        pageSize: 10 })
      this.dataList = data.items
      console.log(this.dataList)
      this.counts = data.counts
      // console.log(this.counts)
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false
      this.type = ''
      this.$refs.formDataRef.resetFields()
    },
    // 打开弹框
    async handleDispatch(type, id) {
      this.dialogVisible = true
      this.type = type
      // 如果类型是edit就是编辑，让数据回显
      if (this.type === 'edit') {
        const { data } = await detail(id)
        console.log(data)
        this.formData = data
      }
    },
    // 确认
    async submit() {
      try {
        await this.$refs.formDataRef.validate()
        if (this.type === 'edit') {
          // console.log(this.formData.name)
          await update(this.formData.id, this.formData)
          this.$message.success('编辑成功')
        } else if (this.type === 'add') {
          await add(this.formData)
          this.$message.success('添加成功')
        }
        this.handleClose()
        this.loadingList()
      } catch (error) {
        console.log(error)
      }
    },
    // 删除
    async delData(id) {
      try {
        await del(id)
        this.$message.success('删除数据成功')
        this.loadingList()
      } catch (error) {
        console.log(error)
      }
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.formData.pageSize = val
      if (this.formData.page === 1) {
        this.loadingList(this.formData)
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.formData.page = val
      this.loadingList()
    },
    async serachBtn() {
      try {
        const { data } = await list(this.waybillSearchFormData)
        console.log(data.items)
        if (data.items) {
          this.dataList = data.items
          this.counts = data.counts
          this.$message.success('搜索成功')
          // this.loadingList()
        } else {
          this.$message.error('无匹配数据')
        }
      } catch (error) {
        console.log(error)
      }
    },
    resetBtn() {
      // this.$refs.searchFormDataRef.resetFields()
      this.waybillSearchFormData = {}
      this.loadingList()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.add-btn{
  margin-bottom: 20px;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
  padding-bottom: 0px;
}

.el-select {
  width: 100%;
}

.car-models /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
.car-models {
  /deep/ .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }
  /deep/ .el-dialog__body {
    text-align: center;
    padding: 40px 60px 0 30px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
}
</style>
